<template>
  <div class="cart">
    <div class="cart__header">
      <span class="cart__header__title">我的全部购物车 ({{ totalCount }})</span>
    </div>
    
    <div v-if="!Object.keys(cartList).length" class="cart__empty">购物车为空</div>
    
    <div v-else class="cart__content">
      <div 
        v-for="(shop, shopId) in cartList" 
        :key="shopId" 
        class="cart__shop"
      >
        <div class="cart__shop__title">{{ shop.shopName }}</div>
        
        <div 
          v-for="(product, productId) in shop.productList"
          :key="productId"
          class="cart__item"
        >
          <img class="cart__item__product__img" :src="product.imgUrl" />
          <div class="cart__item__product__info">
            <h4 class="cart__item__product__title">{{product.name}}</h4>
            <p class="cart__item__product__price">
              <span class="cart__item__product__yen">&yen;</span>{{product.price}}
              <span class="cart__item__product__origin">&yen;{{product.oldPrice}}</span>
            </p>
          </div>
          <div class="cart__item__product__number">
            <span
              class="cart__item__product__number__minus"
              @click="() => { changeCartItem(shopId, productId, product, -1) }"
            >-</span>
            {{product.count || 0}}
            <span
              class="cart__item__product__number__plus"
              @click="() => { changeCartItem(shopId, productId, product, 1) }"
            >+</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

const useCartEffect = () => {
  const store = useStore()
  const cartList = store.state.cartList
  
  const changeCartItem = (shopId, productId, item, num) => {
    store.commit('changeCartItemInfo', {
      shopId, productId, productInfo: item, num
    })
  }
  
  const totalCount = computed(() => {
    let count = 0
    for(let shopId in cartList) {
      const productList = cartList[shopId].productList
      for(let productId in productList) {
        const product = productList[productId]
        count += product.count
      }
    }
    return count
  })
  
  const totalPrice = computed(() => {
    let total = 0
    for(let shopId in cartList) {
      const productList = cartList[shopId].productList
      for(let productId in productList) {
        const product = productList[productId]
        total += (product.price * product.count)
      }
    }
    return total.toFixed(1)
  })
  
  return { cartList, changeCartItem, totalCount, totalPrice }
}

export default {
  name: 'CartList',
  setup() {
    const { cartList, changeCartItem, totalCount, totalPrice } = useCartEffect()
    return { cartList, changeCartItem, totalCount, totalPrice }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/variables.scss';
.cart {
  &__header {
    line-height: .44rem;
    padding: 0 .18rem;
    font-size: .16rem;
    color: $content-fontcolor;
    &__title {
      font-weight: bold;
    }
  }
  &__empty {
    text-align: center;
    padding: 2rem 0;
    color: $content-notice-fontcolor;
  }
  &__content {
    background: $bgColor;
  }
  &__shop {
    margin-bottom: .16rem;
    &__title {
      padding: .16rem;
      font-size: .16rem;
      color: $content-fontcolor;
    }
  }
  &__item {
    position: relative;
    display: flex;
    padding: .16rem;
    border-bottom: .01rem solid $content-bgColor;
    &__product {
      overflow: hidden;
      &__img {
        width: .46rem;
        height: .46rem;
        margin-right: .16rem;
      }
      &__info {
        flex: 1;
      }
      &__title {
        font-size: .14rem;
        color: $content-fontcolor;
        margin: 0;
        margin-bottom: .08rem;
      }
      &__price {
        font-size: .14rem;
        color: $hightlight-fontColor;
        margin: 0;
      }
      &__yen {
        font-size: .12rem;
      }
      &__origin {
        margin-left: .06rem;
        font-size: .12rem;
        color: $light-fontColor;
        text-decoration: line-through;
      }
      &__number {
        position: absolute;
        right: .16rem;
        bottom: .16rem;
        &__minus, &__plus {
          display: inline-block;
          width: .2rem;
          height: .2rem;
          line-height: .16rem;
          border-radius: 50%;
          font-size: .2rem;
          text-align: center;
        }
        &__minus {
          border: .01rem solid $medium-fontColor;
          color: $medium-fontColor;
          margin-right: .05rem;
        }
        &__plus {
          background: $btn-bgColor;
          color: $bgColor;
          margin-left: .05rem;
        }
      }
    }
  }
}
</style>